<template>
  <div class="img-contain clearFix">
    <div class="demo-upload-list" v-if="isboxUpload" v-for="(item, index) in imgList" :key="index+'-label'">
      <div class="demo-upload-list-cover">
        <div @click="viewPdf(item)" v-if="!/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(item.suffixType)">
          <Icon color="#ddd" type="search" title='查看附件'></Icon>
        </div>

      </div>

      <img src="../assets/images/pdf.png" v-if="/(pdf|PDF)$/.test(item.suffixType)">
      <img src="../assets/images/word.png" v-if="/(doc|DOC|docx|DOCX)$/.test(item.suffixType)">
      <img src="../assets/images/zip.png" v-if="/(zip|ZIP)$/.test(item.suffixType)">
      <img src="../assets/images/txt.png" v-if="/(txt|txt)$/.test(item.suffixType)">
      <img src="../assets/images/xls.png" v-if="/(xls|xlsx|XLS|XLSX)$/.test(item.suffixType)">
      <img src="../assets/images/ppt.png" v-if="/(ppt|PPT)$/.test(item.suffixType)">
      <img :src="item.annexPath">
    </div>
    <div class="boxUpload" v-if="imgList.length==0 && isboxUpload">图片显示<br><span v-if="panduanwenzi">{{size}}</span></div>
    <div class="upload" id="uploadId1" v-if="mark">
      <Button class="uploadButton" icon="ios-cloud-upload-outline">
        <input type="file" id="fileUpload" class="boxInput" accept="image/png,image/jpg,image/jpeg" @change="fileChange($event)">上传图片
      </Button>
      <div class="upload-type" v-if="jindu && isboxUpload">
        <label class="status">状态: <span>{{statusText}}</span></label>
        <span class="progress">进度: <i id="auth-progress">{{authProgress}}</i> %</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Rest from '@/rest'
  import axios from 'axios';
  import Api from '@/api/apiNew'
  //import Bus from '@/store/bus'
  import Helper from '@/common/helper'
  import {apiPost} from '@/common/http'
  
  import secret from '@/utils/secret';
  import consts from '@/utils/consts'


  export default {
    components: {
    },
    props:{
      flags:{
        type: Number
      },
      mark:{
        type: Boolean,
        default:true
      },
      panduanwenzi:{
        type: Boolean,
        default:true
      },
      // 是否加载水印
      isPicSY:{
        type: String,
        default:''
      },
      // 图片大小的空值
      imageSize:{
        type: Number,
        default:5
      }

    },
    data() {
      return {
        loudongimg:{
          width:null,
          height:null,
        },
        jindu:false,
        videoIds:null,
        isboxUpload:true,
        timeout: '',
        partSize: '',
        parallel: '',
        retryCount: '',
        retryDuration: '',
        region: 'cn-shanghai',
        userId: '1887964317723133',
        file: null,
        authProgress: 0,
        size: '尺寸大小750x422',
        uploadDisabled: true,
        resumeDisabled: true,
        pauseDisabled: true,
        uploader: null,
        statusText: '',
        logSource:null,
        defaultList: [],
        getToken: '',
        imgName: '',
        updata: {
          fileName: '',
        },
        visible: false,
        imgList: [],
        thumbnailList: []
      }
    },
    methods: {
      isboxUploadshow() {
        this.isboxUpload=false
      },
      fileChange (e) {
        var that = this
        //单张上传
        that.file = e.target.files[0]
        if (that.file.size > 1024 * 1024 * (this.imageSize)) {
            let txt = this.imageSize > 1 ? this.imageSize+'M' : this.imageSize*1000 +'K'
            $("#fileUpload").val('');
            that.$Message.error(`上传图片不能大于${txt}`);
          return;
        }
        var newdate = new FormData()
        newdate.append('title', '1111');
        newdate.append('appName', 'web_back');
        newdate.append('appVersion', '1.0');
        newdate.append('multipartFile', that.file);
        var Title = that.file.name
        // var restApi = Api.user.getAliImg+'?title='+Title
        console.log("传入的值！",this.isPicSY);
        var restApi = this.isPicSY && this.isPicSY != '' ? Api.user.uploadImageAct+'?title='+Title : Api.user.getAliImg+'?title='+Title
        Helper.globalLoading_show();
        Rest.upload(restApi,newdate).done(function(res) {
          if (Helper.isSuccess(res)) {
            if (res) {
              document.getElementById('fileUpload').value = null;
              let dataJson = JSON.parse(secret.Decrypt(res.data))
              that.jindu = true
              that.statusText = '上传成功'
              that.authProgress = '100'
              that.handleSuccess(dataJson)
            } else {
            }
          } else {
            that.$Message.error(res.status.msg);
          }
        });
        Helper.globalLoading_hide();
        return
      },
      authUpload () {
        // 然后调用 startUpload 方法, 开始上传
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.uploadDisabled = true
          this.pauseDisabled = false
        }
      },
      // 暂停上传
      pauseUpload () {
        if (this.uploader !== null) {
          this.uploader.stopUpload()
          this.resumeDisabled = false
          this.pauseDisabled = true
        }
      },
      // 恢复上传
      resumeUpload () {
        if (this.uploader !== null) {
          this.uploader.startUpload()
          this.resumeDisabled = true
          this.pauseDisabled = false
        }
      },
      changeRadio(value,item) {
        var that=this;
        if(Helper.getSearchItem('flage')=='add') {
          var currentStatus=this.flags;
          switch (currentStatus) {
            case '1':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccessone', that.imgList);
              break;
            case '2':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccesstwo', that.imgList);
              break;
            case '3':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccessthree', that.imgList);
              break;
            case '4':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccessfour', that.imgList);
              break;
            case '5':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccessfive', that.imgList);
              break;
            case '7':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccessseven', that.imgList);
              break;
            case '8':
              for(var i=0;i<that.imgList.length;i++) {
                that.imgList[i].isCover=0;
                if(value==i) {
                  that.imgList[value].isCover=1;
                }
              }
              that.$emit('handleSuccesseight', that.imgList);
              break;
          }
        }else {
          that.homePicture(item.id)
        }
        // alert($('input[name="testradio"]:eq('+value+')').val())
        // alert(value)
      },
      // 设置为封面图(新增时不调用，编辑时调用)
      homePicture(ids) {
        var that=this;
        var params={
          id:ids,
          logSource:that.logSource,
        }
        if(ids !=undefined && ids>0) {
          Helper.globalLoading_show();
          var restApi=Api.caseManage.albumphote.homePicture
          Rest.get(restApi,params).done((res) => {
            if (Helper.isSuccess(res)) {
              that.$Message.success(res.status.msg);
            } else {
              if(res.status && res.status.msg) {
                that.$Message.error(res.status.msg);
              }
            }
            Helper.globalLoading_hide();
          });
        }
      },
      //验证图片类型展示不同的图片
      testFileType() {
        //上传图片和文件
      },
      handleRemove(index,item) {
        if(item.id) {
          this.$emit('deleteImg', item.id,this.flags);
        }else {
          this.imgList.splice(index, 1);
        }
        // this.$emit('handleSuccess', this.imgList.length);
      },
      handleSuccess(res) {
        this.imgList = []
        this.imgList.push({
          annexPath: res.imageURL,
          isCover:0
        });
        console.log(this.imgList)
        this.$emit('handleSuccessone', this.imgList);
        this.$emit('changeTheImg', this.imgList,this.loudongimg);
      },
      handleSuccesstwo(res) {
        this.imgList.push({
          annexPath: res.imageURL,
          isCover:0
        });
        this.$emit('handleSuccesstwo', this.imgList);
      },
      handleSuccessthree(res) {
        this.imgList.push({
          annexPath: res.data,
          isCover:0
        });
        this.$emit('handleSuccessthree', this.imgList);
      },
      handleSuccessfour(res) {
        this.imgList.push({
          annexPath: res.data,
          isCover:0
        });
        this.$emit('handleSuccessfour', this.imgList);
      },
      handleSuccessfive(res) {
        this.imgList.push({
          annexPath: res.data,
          isCover:0
        });
        this.$emit('handleSuccessfive', this.imgList);
      },
      handleSuccessseven(res) {
        this.imgList.push({
          annexPath: res.data,
          isCover:0
        });
        // console.log('7',this.imgList)
        this.$emit('handleSuccessseven', this.imgList);
      },
      handleSuccesseight(res) {
        this.imgList.push({
          annexPath: res.data,
          isCover:0
        });
        this.$emit('handleSuccesseight', this.imgList);
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '不支持此类型的文件',
          desc: 'file' + file.name + ' 请选择jpg or png.'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: '图片大小不能超过10M',
          desc: 'File  ' + file.name + ' is too large, no more than 10M.'
        });
      },
      handleBeforeUpload() {
        var that = this;
        function getFileName(o) {
          var pos = o.lastIndexOf("\\");
          return o.substring(pos + 1);
        }
        if(that.flags=="1") {
          var filees = $("#uploadId1 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="2") {
          var filees = $("#uploadId2 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="3") {
          var filees = $("#uploadId3 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="4") {
          var filees = $("#uploadId4 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="5") {
          var filees = $("#uploadId5 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="7") {
          var filees = $("#uploadId7 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }else if(that.flags=="8") {
          var filees = $("#uploadId8 input").val();
          var fileNames = getFileName(filees);
          this.updata.fileName = fileNames;
        }

        const check = this.imgList.length < 5;
//        if (!check) {
//          this.$Notice.warning({
//            title: '数量太多了'
//          });
//        }
        // return check;
      },
      handleView(id) {
      },
      viewPdf(pdfLink) {
        // console.log(pdfLink)
        window.open(pdfLink);
      }
    },
    watch:{
      size(e){
        this.size = e;
        console.log("改变了",e);
      }
    },
    mounted() {
      var that=this;
      that.jindu = false
      that.getToken = Helper.get('token');
      that.logSource = Helper.getSearchItem('logSource');
      // this.$emit('handleSuccessone', this.imgList.length);
    },
    created() {
      var that=this;
      that.jindu = false

    },
    activated() {
      var that=this;
      that.jindu = false
    }
  }
</script>
<style lang="scss" scoped>
  @import "../assets/sass/install";

  .boxUpload {
    width: 150px;
    height: 150px;
    border: solid 1px #ccc;
    line-height: 50px;
    padding-top:30px;
    text-align: center;
    margin-bottom: 5px;
    span {
      line-height: 1.5;
      display: inline-block;
    }
  }
  .img-contain {
    margin-right: 80px;
    width: 100%;

    .demo-upload-list {
      display: inline-block;
      width: 160px;
      height: 160px;
      text-align: center;
      background: #fff;
      position: relative;
      margin-right: 20px;
    overflow:hidden;

      img {
        display: block;
        width: 160px;
    height: 100%;
      border: 1px solid #eeeeee;
    }

      .demo-upload-list-cover {
        width: 180px;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
        border-radius: 4px;

        i {
          color: #fff;
          font-size: 20px;
          cursor: pointer;
          margin: 0 2px;
      }

        .radio-l {
          label {
            position: relative;
            top: 0px;
            // color: #B7BABB;
            line-height: 16px;
        }

          input[type="radio"] {
            display: none;
        }

          input[type='radio']+label:before {
            margin-top: -2px;
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 6px;
            border-radius: 100%;
            vertical-align: middle;
            border: 1px solid #E4E4E4;
            background: #FFFFFF;
        }

          input[type='radio']:checked+label:before {
            background-image: url(../assets/images/radio-active.png);
            background-position: center center;
            background-size: 18px 18px;
        }
      }

    }

    }
  }

  .uploadButton {
    display: block;
    width: 150px;
    height: 40px;
    position: relative;
  }
  .upload{
    position: absolute;
    top: 90px;
    left:190px;
  }
  .boxInput {
    position: absolute;
    display: block;
    width: 150px;
    height: 40px;
    top:0px;
    left:0px;
    opacity:0;
  }
  .deleteImg {
    display: inline-block;
    opacity: 1;
    width: 17px;
    height: 17px;
    background: url(../assets/images/delete.png) no-repeat;

    &:hover {
      display: inline-block;
      opacity: 1;
      width: 17px;
      height: 17px;
      background: url(../assets/images/delete-active.png) no-repeat;
      background-size: 17px 17px;
  }
  }
</style>
